<template>
	<view class="content">
		<view class="all">
			<uni-icons type="staff" class="icon" color="#E99552" size="28"></uni-icons>
			<text>客户总数：</text><text class="col_red">{{num}}</text>
		</view>
		<view class="search">
			<uni-icons type="search" class="icon" size="26" color="#999999"></uni-icons>
			<input type="text" confirm-type="search" placeholder-class="pla" placeholder="搜索" v-model="name"
				@confirm="sou" />
			<uni-icons v-if="name" @click="clean()" type="close" class="icon" size="26" color="#999999"></uni-icons>
			<view class="s_btn" @click="sou()">搜索</view>
		</view>
		<view class="info" v-for="item in list">
			<view class="i_top" @click="userinfo(item)">
				<view class="imgs">
					<image :src="item.header_img" mode=""></image>
					<image src="../../static/img/edit.png" mode="widthFix"></image>
				</view>
				<view class="text">
					<view>姓名：{{item.real_name}}</view>
					<view class="phone" @click.stop="call(item)">
						手机号：{{item.mobile}}
						<uni-icons color="#E99552" class="icon" type="phone"
							size="22"></uni-icons>
					</view>
					<view>总借款：<text>￥{{item.borrow_amount}}</text></view>
					<view>已还本金：<text>￥{{item.true_self_money}}</text></view>
					<view>已还利息：<text>￥{{item.true_interest_money}}</text></view>
					<view v-if="item.office">单位：{{item.office}}</view>
					<view v-if="item.position">职位：{{item.position}}</view>
				</view>
			</view>
			<view class="btns">
				<view @click="file(item.id)">认证信息</view>
				<view @click="info(item)">工作信息</view>
			</view>
			<!-- <uni-icons @click="info(item)" color="#999999" class="icon" type="right" size="22"></uni-icons> -->
		</view>
		<view v-if="!isAll&&list" class="hint">到底啦~</view>
	</view>
</template>

<script>
	import {
		clientInfo
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				page: 1,
				isAll: false,
				list: '',
				name: '',
				num: ''
			}
		},
		onLoad() {},
		onShow() {
			this.client()
		},
		methods: {
			clean() {
				this.page = 1
				this.name = ''
				this.client()
			},
			sou() {
				this.page = 1
				this.client()
			},
			call(e) {
				uni.makePhoneCall({
					phoneNumber: e.mobile //仅为示例
				});
			},
			client() {
				clientInfo({
					page: this.page,
					name: this.name
				}).then(res => {
					this.num = res.data.total
					console.log(res);
					// this.list = res.data.list
					var info = this.list
					if (this.page == 1) {
						this.list = res.data.list
					} else {
						this.list = info.concat(res.data.list)
					}
					this.isAll = res.data.list.length < 10 ? false : true
				})
			},
			file(e) {
				uni.navigateTo({
					url: '/pages/me/jobFile?id=' + e
				})
			},
			info(e) {
				uni.navigateTo({
					url: '/pages/me/jobInfo?info=' + JSON.stringify(e)
				})
			},
			userinfo(e) {
				uni.navigateTo({
					url: '/pages/me/jobUser?info=' + JSON.stringify(e)
				})
			}
		},
		onReachBottom() {
			console.log(this.isAll);
			if (this.isAll) {
				this.page++;
				this.client()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		position: relative;
		overflow: hidden;
		padding: 90rpx 0 0 0;
	}

	.all {
		width: 100vw;
		height: 90rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 888;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);

		.icon {
			margin-right: 10rpx;
		}

		text {
			font-size: 28rpx;
		}

		.col_red {
			color: #FF534E;
		}
	}
	
	.search {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 40rpx auto 40rpx;
		font-size: 28rpx;
		// background-color: palegoldenrod;
		// position: fixed;
		// left: 40rpx;
		// top: 120rpx;
	
		.icon {
			margin: 0 16rpx 0 30rpx;
		}
		.pla {
			color: #999999;
		}
	
		input {
			flex: 1;
			font-size: 28rpx;
		}
		
		.s_btn {
			background: #FF524F;
			color: white;
			font-size: 26rpx;
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
	}
	

	.info {
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 12rpx;
		background-color: white;

		.i_top {

			display: flex;
			align-items: center;
		}

		.imgs {
			position: relative;
			width: 72rpx;
			height: 72rpx;

			image {
				&:nth-of-type(1) {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					display: block;
				}

				&:nth-of-type(2) {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 28rpx;
					height: 28rpx;
					z-index: 222;
				}
			}
		}

		.text {
			flex: 1;
			margin-left: 20rpx;

			view {
				height: 40rpx;
				line-height: 40rpx;
				margin-bottom: 20rpx;

				&:last-child {
					margin: 0;
				}
			}
			>view>text {
				color: #FF5746;
			}
		}

		.phone {
			display: flex;
			align-items: center;

			.icon {
				margin-left: 12rpx;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx 30rpx 10rpx;

			view {
				width: 240rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: white;
				border-radius: 40rpx;

				&:nth-of-type(1) {
					background: #E99552;
				}

				&:nth-of-type(2) {
					background: #FF534C;
				}
			}
		}
	}
	.hint {
		margin: 50rpx 0;
		text-align: center;
		color: #999999;
	}
</style>